<template>
	<view class="x-wrapper">
		<view class="bind-box">
			<text class="bind-text1">找回密码</text>
			<text class="bind-text2">验证注册手机号，为您找回密码</text>
			<view class="form-box">
				<view class="form-input1">
					<u-input prefixIcon="+86" prefixIconStyle="color:#333;font-size: 14px" placeholder="请输入您的手机号"
						type="number" border="none" :clearable="true" fontSize="28rpx" color="#333"
						placeholderStyle="color:#9AA2B7" maxlength="11" v-model="phoneNumber" class="f-input"></u-input>
				</view>
				<view class="form-input">
					<u-input placeholder="请输入验证码" type="number" border="none" :clearable="true" fontSize="28rpx"
						color="#333" placeholderStyle="color:#9AA2B7" maxlength="6" v-model="code" class="f-input">
						<template slot="suffix">
							<!-- <view class="yanzhengbtn" @click="getCode">获取验证码</view> -->
							<view class="yanzhengbtn">
								<u-text size="28rpx" color="#386FFF" :text="tips" @click="getCode" bold
									lineHeight="90rpx">
								</u-text>
							</view>

						</template>
					</u-input>
					<image class="yazhengma" src="../../static/images/yanzhengma.png" alt=""></image>
				</view>
				<view class="form-input">
					<u-input placeholder="请设置新密码"  type="text"  :password="isShowPassword" border="none" fontSize="28rpx"
						color="#333" placeholderStyle="color:#9AA2B7" maxlength="16" v-model="newPwd" class="f-input">
					</u-input>
					<image class="mima" src="../../static/images/password.png" alt=""></image>
					<view class="eye_position" @tap='toggleShowPassword'>
						<image class="eye_close" src='../../static/images/eye_close.png' v-if='isShowPassword' />
						<image class="eye_open" src='../../static/images/eye_open.png' v-if='!isShowPassword' />
					</view>
				</view>
				<view class="form-input">
					<u-input placeholder="请再次输入密码" type="text" :password="isShowPasswordTwo" border="none"  fontSize="28rpx"
						color="#333" placeholderStyle="color:#9AA2B7" maxlength="16" v-model="newPwdTwo"
						class="f-input">
					</u-input>
					<image class="mima" src="../../static/images/password.png" alt=""></image>
					<view class="eye_position" @tap='toggleShowPasswordTwo'>
						<image class="eye_close" src='../../static/images/eye_close.png' v-if='isShowPasswordTwo' />
						<image class="eye_open" src='../../static/images/eye_open.png' v-if='!isShowPasswordTwo' />
					</view>
				</view>
				<view class="btn-box">
					<view class="btn">
						<u-button text="重置密码" :hairline="false" :customStyle="commonBtnStyle" color="#386FFF"
							@click="getRegisterPassword"></u-button>
					</view>
				</view>
			</view>
		</view>

		<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" changeText="Xs" startText="获取验证码"
			endText="重新发送" @change="codeChange"></u-code>
	</view>
</template>

<script>
	import {
		sendCode
	} from '@/common/api.js'
	export default {
		data() {
			return {
				isShowPassword: true,
				isShowPasswordTwo: true,
				phoneNumber: '',
				code: '',
				newPwd: '',
				newPwdTwo: '',
				tips: '',
				seconds: 60,
				rules: {
					newPwd: {
						rule: /^[0-9a-zA-Z]{6,16}$/,
						// msg: "密码应该为6-16位"
					},
					newPwdTwo: {
						rule: /^[0-9a-zA-Z]{6,16}$/,
						// msg: "密码应该为6-16位"
					},
					phoneNumber: {
						rule: /^1[3456789]\d{9}$/,
						// msg: "手机号格式错误"
					},
					code: {
						rule: /^[0-9]{6}$/,
						// msg: "请输入6位数字验证码"
					}
				},
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			//密码是否显示
			toggleShowPassword() {
				var isShowPassword = !this.isShowPassword;
				this.isShowPassword = isShowPassword
			},
			toggleShowPasswordTwo() {
				var isShowPasswordTwo = !this.isShowPasswordTwo;
				this.isShowPasswordTwo = isShowPasswordTwo
			},
			//判断验证是否符合要求，合法性校验
			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this[key])) {
					//提示信息
					uni.showToast({
						title: this.rules[key].msg,
					})
					//取反
					bool = false;
					return false;
				}
				return bool;
			},
			async getCode() {
				if (this.phoneNumber == '') {
					this.$u.toast('手机号码不能为空');
					return
				}
				if (this.$u.test.mobile(this.phoneNumber)) {

					if (this.$refs.uCode.canGetCode) {
						const res = await sendCode({
							params: {
								phone: this.phoneNumber,
								type: 'login'
							}
						})
						// console.log('res', res)
						this.$u.toast('发送成功');
						this.$refs.uCode.start();
						// this.showToast = true;
						// 通知验证码组件内部开始倒计时

						// setTimeout(() => {
						// 	this.$refs.uCode.start();
						// 	this.$u.toast('发送成功')
						// }, 1000)
					} else {
						this.$u.toast('倒计时结束后再发送');
					}

				} else {
					this.$u.toast('手机号码格式有误');
				}


			},
			end() {
				// this.$u.toast('倒计时结束');
			},
			start() {
				// this.$u.toast('倒计时开始');
			},
			getRegisterPassword() {
				if (!this.phoneNumber) {
					this.$u.toast("手机号不能为空")
					return

				}
				if (!this.validate('phoneNumber')) {
					this.$u.toast("请输入正确的手机号")
					return
				}
				if (!this.newPwd || !this.newPwdTwo) {
					this.$u.toast("密码不能为空")
					return

				}
				if (!this.validate('newPwd') || !this.validate('newPwdTwo')) {
					this.$u.toast("请输入正确的密码")
					return

				}
				if (this.newPwdTwo !== this.newPwd) {
					this.$u.toast("两次密码不一致，请确认")
					return
				}
				if (!this.code) {
					this.$u.toast('短信验证码不能为空');
					return

				}
				if (!this.validate('code')) {
					this.$u.toast('短信验证码格式有误');
					return
				}
				this.$u.route({
					url: `pages/login/login`,
					type: 'redirectTo'
				})

			}
		}
	}
</script>

<style lang="scss" scope>
	.bind-box {
		margin-top: 20px;
		padding: 60px 30px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.bind-text1 {
			font-size: 30px;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #386FFF;
			letter-spacing: 4px;
		}

		.bind-text2 {
			font-size: 14px;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: #9AA2B7;
			margin-top: 10px;
		}

		.form-box {
			margin-top: 66px;
			/deep/ .u-text__value {
				margin-left: 12px;
			}

			.btn-box {
				margin-top: 65px;
			}
		}

		/deep/.u-button__text {
			font-size: 18px !important;
			font-family: PingFangSC-Medium, PingFang SC;
		}
	}
</style>
